<!DOCTYPE html>
<html>
	<head>
		<title>滚动条表格</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
		<link rel="stylesheet" type="text/css" href="../../plugin/jqgrid/css/ui.jqgrid.css">
		<script type="text/javascript" src="../../plugin/jquery/jquery.js">
</script>
		<script type="text/javascript" src="../../plugin/jquery/jquery.ext.js">
</script>
		<script type="text/javascript" src="../../plugin/jqgrid/js/jquery.jqGrid.src.js">
</script>
		<script type="text/javascript" src="../../plugin/jqgrid/js/i18n/grid.locale-cn.js">
</script>
	</head>
	<body>
		<table id="jqGrid" class="table table-bordered table-hover">
			<thead>
				<tr>
					<th width="100">
						序号
					</th>
					<th width="200">
						名称
					</th>
					<th width="100">
						类型
					</th>
					<th>
						说明
					</th>
					<th width="150">
						更新日期
					</th>
					<th width="120">
						用户操作
					</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>
						1001
					</td>
					<td>
						第1个产品
					</td>
					<td style="text-align: center;">
						软件
					</td>
					<td>
						这是第一款软件类产品，这里省略很多字……这里省略很多字……这里省略很多字……这里省略很多字……这里省略很多字……这里省略很多字……
					</td>
					<td style="text-align: center;">
						2013/12/28 18:24:58
					</td>
					<td style="text-align: center;">
						<a href="#">详细</a>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
				<tr>
					<td>
						1002
					</td>
					<td>
						第2个产品
					</td>
					<td style="text-align: center;">
						软件
					</td>
					<td>
						Hello World
					</td>
					<td style="text-align: center;">
						2013/12/28 18:24:58
					</td>
					<td style="text-align: center;">
						<a href="#">详细</a>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
				<tr>
					<td>
						1003
					</td>
					<td>
						第3个产品
					</td>
					<td style="text-align: center;">
						软件
					</td>
					<td>
						Hello World
					</td>
					<td style="text-align: center;">
						2013/12/28 18:24:58
					</td>
					<td style="text-align: center;">
						<a href="#">详细</a>
						<a href="#">修改</a>
						<a href="#">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
		<div id="jqGridPager"></div>
		<script type="text/javascript">
$(document).ready(function() {
	$("#jqGrid").jqGrid( {
		viewrecords : true,
		width : 780,
		height : 250,
		rowNum : 20,
		pager : "#jqGridPager"
	});
});
</script>
</html>
